{% extends "ETP/base.html" %}

    {% block pageContent %}
        <div class="page-content">
            <div class="page-content-area">
                <div class="page-header">
                    <h1>产品管理</h1>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="table-header">

                            与您相关的产品查询结果
                        </div>

                        <div>
                            <table id="productsTable" class="table table-stiped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th class="center">
                                            <span>序号</span>
                                        </th>
                                        <th>产品名称</th>
                                        <th>产品经理</th>
                                        <th>开发负责人</th>
                                        <th>开发成员</th>
                                        <th>测试负责人</th>
                                        <th>测试成员</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>

                                <tbody>

                                    {% for product in products %}
                                        <tr>
                                            <td class="center">
                                                <span>{{ forloop.counter }}</span>
                                            </td>
                                            <td>{{ product.name }}</td>
                                            <td>{{ product.owner }}</td>
                                            <td>{{ product.member_leader }}</td>
                                            <td>{{ product.member_list }}</td>
                                            <td>{{ product.participant_leader }}</td>
                                            <td>{{ product.paticipant_list }}</td>
                                            <td>
                                                <div class="hidden-sm hidden-xs action-buttons">
                                                    <a class="blue" href="#">
                                                        <i class="ace-icon fa fa-eye bigger-110">详情</i>
                                                    </a>
                                                    <a class="green" data-toggle="modal" data-target="editProductModal" onclick="getProduct({{ product.id }})">
                                                        <i class="ace-icon fa fa-edit bigger-110">修改</i>
                                                    </a>
                                                    <a class="red" href="#">
                                                        <i class="ace-icon fa fa-trash-o bigger-110">删除</i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}

                                </tbody>
                            </table>
                        </div>

                        <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#newProductModal" onclick="getUsers()">
                            <i class="glyphicon glyphicon-plus">
                                添加
                            </i>
                        </button>

                    </div>
                </div>

                <div id="newProductModal" class="modal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4>请填写产品信息</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-6">
                                        <div class="form-group">
                                            <label for="form-field-productname">产品名称</label>
                                            <div>
                                                <input class="input-large" type="text" id="form-field-productname" placeholder="产品名称">
                                            </div>
                                        </div>

                                        <div class="space-4"></div>
                                        <div class="form-group">
                                            <label for="form-field-select-member_leader">开发负责人</label>
                                            <div>
                                                <select class="chosen-select" id="form-field-select-member_leader" data-placeholder="请选择">
                                                    <option value="">  </option>

                                                </select>
                                            </div>
                                        </div>
                                        <div class="space-4"></div>


                                        <div class="form-group">
                                            <label for="form-field-select-member">开发组成员</label>
                                            <div>
                                                <select class="form-control" id="form-field-select-member" data-placeholder="请选择" multiple="multiple">
                                                    <option value="">  </option>

                                                </select>
                                            </div>
                                        </div>
                                        <div class="space-4"></div>


                                    </div>

                                    <div class="col-xs-12 col-sm-6">


                                        <div class="form-group">
                                            <label for="form-field-description">产品描述</label>
                                            <div>
                                                <input class="input-large" type="text" id="form-field-description" placeholder="产品描述">
                                            </div>
                                        </div>
                                        <div class="space-4"></div>


                                        <div class="form-group">
                                            <label for="form-field-select-participant_leader">测试负责人</label>
                                            <div>
                                                <select class="chosen-select" id="form-field-select-participant_leader" data-placeholder="请选择">
                                                    <option value="">  </option>

                                                </select>
                                            </div>
                                        </div>
                                        <div class="space-4"></div>
                                        <div class="form-group">
                                            <label for="form-field-select-participant">测试组成员</label>
                                            <div>
                                                <select class="form-control" id="form-field-select-participant" data-placeholder="请选择" multiple="multiple">
                                                    <option value="-1">  </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="space-4"></div>

                                    </div>

                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-sm" data-dismiss="modal">
                                    <i class="ace-icon fa fa-times"></i>
                                        取消
                                </button>
                                <button class="btn btn-sm btn-primary" onclick="createProduct()">
                                    <i class="ace-icon fa fa-check"></i>
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="editProductModal" class="modal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4>修改产品信息</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-xs-12 col-sm-6">
                                        <div class="form-group">
                                            <label for="form-field-productname">产品名称</label>
                                            <div>
                                                <input class="input-large" type="text" id="form-field-productname" placeholder="产品名称">
                                            </div>
                                        </div>

                                        <div class="space-4"></div>
                                        <div class="form-group">
                                            <label for="form-field-select-member_leader">开发负责人</label>
                                            <div>
                                                <select class="chosen-select" id="form-field-select-member_leader" data-placeholder="请选择">
                                                    <option value="">  </option>

                                                </select>
                                            </div>
                                        </div>
                                        <div class="space-4"></div>


                                        <div class="form-group">
                                            <label for="form-field-select-member">开发组成员</label>
                                            <div>
                                                <select class="form-control" id="form-field-select-member" data-placeholder="请选择" multiple="multiple">
                                                    <option value="">  </option>

                                                </select>
                                            </div>
                                        </div>
                                        <div class="space-4"></div>


                                    </div>

                                    <div class="col-xs-12 col-sm-6">


                                        <div class="form-group">
                                            <label for="form-field-description">产品描述</label>
                                            <div>
                                                <input class="input-large" type="text" id="form-field-description" placeholder="产品描述">
                                            </div>
                                        </div>
                                        <div class="space-4"></div>


                                        <div class="form-group">
                                            <label for="form-field-select-participant_leader">测试负责人</label>
                                            <div>
                                                <select class="chosen-select" id="form-field-select-participant_leader" data-placeholder="请选择">
                                                    <option value="">  </option>

                                                </select>
                                            </div>
                                        </div>
                                        <div class="space-4"></div>
                                        <div class="form-group">
                                            <label for="form-field-select-participant">测试组成员</label>
                                            <div>
                                                <select class="form-control" id="form-field-select-participant" data-placeholder="请选择" multiple="multiple">
                                                    <option value="-1">  </option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="space-4"></div>

                                    </div>

                                </div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-sm" data-dismiss="modal">
                                    <i class="ace-icon fa fa-times"></i>
                                        取消
                                </button>
                                <button class="btn btn-sm btn-primary" onclick="updateProduct()">
                                    <i class="ace-icon fa fa-check"></i>
                                    保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    {% endblock pageContent %}

    {% block pagejs %}
        <script type="text/javascript">
            jQuery(function () {
                $('.chosen-select').chosen({allow_single_deselect:true});

                $(window).on('resize.chosen',function () {
                    var w = $('.chosen-select').parent().width();
                    $('.chosen-select').siblings('.chosen-container').css({'width':w});
                }).triggerHandler('resize.chosen');
                $('#newProductModal').on('shown.bs.modal',function () {
                    $(this).find('.chosen-container').each(function () {
                        $(this).find('a:first-child').css('width','210px');
                        $(this).find('.chosen-drop').css('width','210px');
                        $(this).find('.chosen-search input').css('width','200px');

                    });
                });
                $('#editProductModal').on('shown.bs.modal',function () {
                    $(this).find('.chosen-container').each(function () {
                        $(this).find('a:first-child').css('width','210px');
                        $(this).find('.chosen-drop').css('width','210px');
                        $(this).find('.chosen-search input').css('width','200px');

                    });
                })
            }
            );
            <!--请求获取测试成员-->
            function getUsers() {
                $.ajax({
                    url:'{% url 'ETP:getUsers' %}',
                    dataType:'json',
                    type:'GET',
                    timeout:2000,
                    success:function (data,status) {
{#                        $('#form-field-description').val('产品描述');#}
{#                        $('#form-field-productname').val('产品名称产品描述');#}
{#                        $('#form-field-description').attr('placeholder','产品描述');#}
{#                        $('#form-field-productname').attr('placeholder','产品名称');#}

                        initSelect('#form-field-select-participant',data);
                        initSelect('#form-field-select-member',data);
                        initSelect('#form-field-select-member_leader',data);
                        initSelect('#form-field-select-participant_leader',data);
                    },
                    error:function () {
                        alert('error')
                    }
                })
            }
            
            <!--ID获取Product-->
            function getProduct(productID) {
                $.ajax({
                    url:'',
                    dataType:'json',
                    type:'GET',
                    timout:2000,
                    success:function () {
                        
                    },
                    error:function () {
                        
                    }
                })
            }


            function initSelect(selectID,data) {
                var select_id = selectID;
                var data_ = data;
                $(select_id).empty();
                $("<option value=-1>请选择</option>").appendTo($(select_id));
                for(var i =0; i< data_.length;i++){
                    $("<option value=" +data_[i].user_id +">" + data_[i].user_name + "</option>").appendTo($(select_id));
                }
                $(select_id).trigger("chosen:updated");
            }
            
            function createProduct() {
                var productName = $('#form-field-productname').val();
                var description = $('#form-field-description').val();
                var member_leader = $('#form-field-select-member_leader').val();
                var participant_leader = $('#form-field-select-participant_leader').val();
                var members = $('#form-field-select-member').val(); //数组
                var participants = $('#form-field-select-participant').val();
                var reqdata = {
                    "productName":productName,
                    "description":description,
                    "member_leaderId":member_leader,
                    "participant_leaderId":participant_leader,
                    "membersIds":members,
                    "participantsIds":participants,
                    "csrfmiddlewaretoken":"{{ csrf_token }}",
                    "user":"{{ user }}",
                };

                $.ajax({
                    url:'{% url 'ETP:createProduct' %}',
                    dataType:'json',
                    traditional:true,
                    type:'POST',
                    data:reqdata,
                    timeout:2000,
                    success:function (data) {
                        if (data.code=="-9"){
                            alert(data.message);
                        } else {
                            alert(data.message);
                            var openUrl_ = data.data.redirectURL;
                            window.location.href="/ETP/"+ openUrl_+"/";
                        }


                    },
                    error:function (data) {
                        alert(data.message);
                    }
                })
            }




        </script>
    {% endblock pagejs %}
